<template>
  <div :class="$style.homePage">
    <img :class="$style.image2Icon" alt="" src="../assets/image 2.png"/>
    <div :class="$style.topBar">
      <div :class="$style.title">AI Travel</div>
      <div :class="$style.title1">Home</div>
      <div :class="$style.title2" @click="onTitleText2Click">My Plans</div>
      <img :class="$style.topBarChild" alt="" src="../assets/Star 1.svg"/>
<!--      <img :class="$style.topBarItem" alt="" src="../assets/Frame 427318908.png" @click="onFrameImageClick"/>-->
    </div>
    <div :class="$style.section">
<!--      <img :class="$style.sectionChild" alt="" src="../assets/Vector 200.svg"/>-->
    </div>
    <div :class="$style.container">
      <div :class="$style.titleParent">
        <b :class="$style.title3">Explore Your Next Adventure</b>
        <div :class="$style.frameChild"/>
        <div :class="$style.description">Your Smarter Travel Partner: Navigate with Precision, Discover with Ease.</div>
      </div>
    </div>
    <div :class="$style.container1">
      <b :class="$style.title4">
        				<span :class="$style.titleTxt">
          					<p :class="$style.blankLine">&nbsp;</p>
          					<p :class="$style.blankLine">Unlock New Adventures, Tailored for You.</p>
        				</span>
      </b>
      <div :class="$style.description1">AI Travel offers intuitive trip planning powered by artificial intelligence,
        optimizing routes, accommodations, and activities for seamless travel experiences.
      </div>
      <div :class="$style.getStartedParent" @click="onFrameContainerClick">
        <div :class="$style.getStarted"/>
        <div :class="$style.getStarted1">Get Started</div>
      </div>
    </div>
    <div :class="$style.section1">
      <div :class="$style.imageContainer">
        <div :class="$style.image">
          <div :class="$style.title5">Discover amazing destinations and plan your dream vacation with AI Travel.</div>
          <div :class="$style.pagination">
            <div :class="$style.paginationChild"/>
            <div :class="$style.paginationItem"/>
            <div :class="$style.paginationItem"/>
            <div :class="$style.paginationItem"/>
          </div>
<!--          <img :class="$style.icon" alt="" src="微信图片_20240424211517 1.png"/>-->
          <img :class="$style.travel2Icon" alt="" src="../assets/travel2.png"/>
        </div>
      </div>
<!--      <img :class="$style.sectionItem" alt="" src="../assets/Vector 200.svg"/>-->
    </div>
    <div :class="$style.section2">
      <div :class="$style.container2">
        <b :class="$style.title6">Popular Travel Cities</b>
        <div :class="$style.list">
          <div :class="$style.item">
            <img :class="$style.frameIcon" alt="" src="../assets/frame.svg"/>
            <div :class="$style.titleWrapper">
              <div :class="$style.title7">Paris</div>
            </div>
          </div>
          <div :class="$style.item">
            <img :class="$style.frameIcon" alt="" src="../assets/frame.svg"/>
            <div :class="$style.titleWrapper">
              <div :class="$style.title7">Bali</div>
            </div>
          </div>
          <div :class="$style.item">
            <img :class="$style.frameIcon" alt="" src="../assets/frame.svg"/>
            <div :class="$style.titleWrapper">
              <div :class="$style.title7">New York</div>
            </div>
          </div>
        </div>
      </div>
<!--      <img :class="$style.sectionItem" alt="" src="Vector 200.svg"/>-->
    </div>
    <div :class="$style.section3">
      <div :class="$style.container3">
        <b :class="$style.title10">Start Planning Your Vacation</b>
        <div :class="$style.description2">
          <p :class="$style.blankLine">Get ready to embark on your dream vacation. Begin your journey by signing up and
            unlocking personalized trip plans tailored just for you</p>
        </div>
        <div :class="$style.button" @click="onButtonContainerClick">
          <div :class="$style.primary">
            <div :class="$style.title11">Sign up Now</div>
          </div>
        </div>
      </div>
<!--      <img :class="$style.sectionItem" alt="" src="Vector 200.svg"/>-->
    </div>
    <div :class="$style.section4">
      <div :class="$style.container4">
        <b :class="$style.title12">User evaluation</b>
      </div>
      <div :class="$style.list1">
        <div :class="$style.card">
          <div :class="$style.user">
            <div :class="$style.avatar">
              <div :class="$style.avatar1"/>
              <div :class="$style.frameDiv">
                <div :class="$style.title13">HappyTraveler123</div>
              </div>
            </div>
<!--            <img :class="$style.userChild" alt="" src="Frame 427318817.svg"/>-->
          </div>
          <div :class="$style.title14">Amazing experience with AI Travel! Highly recommended.</div>
        </div>
        <div :class="$style.card">
          <div :class="$style.user">
            <div :class="$style.avatar">
              <div :class="$style.avatar1"/>
              <div :class="$style.frameDiv">
                <div :class="$style.title13">AdventureSeeker1</div>
              </div>
            </div>
<!--            <img :class="$style.userChild" alt="" src="Frame 427318817.svg"/>-->
          </div>
          <div :class="$style.title14">
            <p :class="$style.blankLine">Very good website, made my trip full of fun </p>
            <p :class="$style.blankLine">love from china</p>
          </div>
        </div>
      </div>
<!--      <img :class="$style.sectionChild1" alt="" src="Vector 200.svg"/>-->
    </div>
    <div :class="$style.section5">
      <div :class="$style.container5">
        <div :class="$style.title17">© 2024 AI Travel. All rights reserved.</div>
        <div :class="$style.title18">Privacy Policy</div>
        <div :class="$style.title19">Terms & Conditions</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {useRouter} from 'vue-router'
const router=useRouter()
const onButtonContainerClick=()=> {
  router.push("/Login")
}



/*import {defineComponent} from 'vue'


export default defineComponent({
  name: "HomePage",
  methods: {
    onTitleText2Click() {
      // Add your code here
    },
    onFrameImageClick() {
      // Add your code here
    },
    onFrameContainerClick() {
      // Add your code  here
    },
    onButtonContainerClick() {
      this.$router.push("/")
    }
  }
})*/</script>
<style module>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');
.image2Icon {
  width: 1440px;
  position: absolute;
  margin: 0 !important;
  top: 80px;
  left: 0px;
  height: 373px;
  object-fit: cover;
  z-index: 0;
}

.title {
  width: 620px;
  position: relative;
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
  font-family: Roboto;
  display: inline-block;
  height: 45px;
  flex-shrink: 0;
}

.title1 {
  width: 235px;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.title2 {
  width: 235px;
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  cursor: pointer;
}

.topBarChild {
  width: 30px;
  position: relative;
  height: 30px;
}

.topBarItem {
  width: 60px;
  position: relative;
  height: 60px;
  object-fit: cover;
  cursor: pointer;
}

.topBar {
  width: 100%;
  margin: 0 !important;
  position: absolute;
  top: -9px;
  right: 0px;
  left: 0px;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
  z-index: 1;
  text-align: left;
  font-size: 16px;
  font-family: Inter;
}

.sectionChild {
  width: 100%;
  position: absolute;
  margin: 0 !important;
  right: 0px;
  bottom: -0.5px;
  left: 0px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 0;
}

.section {
  width: 1440px;
  height: 57px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px 170px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.title3 {
  position: absolute;
  top: 37px;
  left: 88.5px;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 520px;
}

.frameChild {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.3);
  width: 697px;
  height: 206px;
}

.description {
  position: absolute;
  top: 110px;
  left: 63px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
  width: 571px;
}

.titleParent {
  width: 697px;
  position: relative;
  height: 206px;
}

.container {
  width: 928px;
  height: 334px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
  color: #fff;
}

.blankLine {
  margin: 0;
}

.titleTxt {
  width: 100%;
}

.title4 {
  width: 776px;
  position: relative;
  line-height: 48px;
  display: flex;
  align-items: center;
}

.description1 {
  width: 658px;
  position: relative;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
}

.getStarted {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 20px;
  background-color: #000;
  width: 303px;
  height: 70px;
}

.getStarted1 {
  position: absolute;
  top: 20px;
  left: 0.5px;
  line-height: 24px;
  font-weight: 500;
  display: inline-block;
  width: 293px;
  height: 50px;
}

.getStartedParent {
  width: 303px;
  position: relative;
  height: 70px;
  cursor: pointer;
  font-size: 36px;
  color: #fff;
}

.container1 {
  width: 928px;
  height: 281px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  z-index: 4;
}

.title5 {
  position: absolute;
  width: calc(100% - 32px);
  top: calc(50% - 8px);
  left: 16px;
  line-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 16px;
}

.paginationChild {
  width: 20px;
  position: relative;
  border-radius: 100px;
  background-color: #fff;
  height: 4px;
}

.paginationItem {
  width: 4px;
  position: relative;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.3);
  height: 4px;
}

.pagination {
  position: absolute;
  bottom: 8px;
  left: calc(50% - 22px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.icon {
  position: absolute;
  top: -220.41px;
  left: 849.6px;
  width: 1170px;
  height: 768px;
  object-fit: cover;
  display: none;
}

.travel2Icon {
  position: absolute;
  top: 0.5px;
  left: -27px;
  width: 1154px;
  height: 360px;
  object-fit: cover;
}

.image {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: 6px;
  background-color: rgba(217, 217, 217, 0.5);
}

.imageContainer {
  flex: 1;
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 4px 0px;
  box-sizing: border-box;
  z-index: 0;
}

.sectionItem {
  width: 100%;
  position: absolute;
  margin: 0 !important;
  right: 0px;
  bottom: -0.5px;
  left: 0px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 1;
}

.section1 {
  align-self: stretch;
  height: 415px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 60px 170px;
  box-sizing: border-box;
  position: relative;
  gap: 60px;
  z-index: 5;
  font-size: 12px;
}

.title6 {
  width: 520px;
  position: relative;
  line-height: 48px;
  display: inline-block;
}

.frameIcon {
  width: 100px;
  position: relative;
  border-radius: 50px;
  height: 100px;
}

.title7 {
  align-self: stretch;
  position: relative;
  line-height: 28px;
}

.titleWrapper {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 0px;
  gap: 20px;
}

.list {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 0px;
  gap: 40px;
  font-size: 20px;
}

.container2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  z-index: 0;
}

.section2 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 60px 170px;
  position: relative;
  gap: 60px;
  z-index: 6;
}

.title10 {
  width: 520px;
  position: relative;
  font-size: 40px;
  line-height: 48px;
  display: inline-block;
}

.description2 {
  width: 781px;
  position: relative;
  line-height: 24px;
  display: inline-block;
}

.title11 {
  position: relative;
  line-height: 24px;
  font-weight: 500;
}

.primary {
  width: 160px;
  border-radius: 8px;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  box-sizing: border-box;
}

.button {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  cursor: pointer;
  text-align: left;
  color: #fff;
}

.container3 {
  flex: 1;
  height: 192px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  z-index: 0;
}

.section3 {
  align-self: stretch;
  height: 312px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 60px 170px;
  box-sizing: border-box;
  position: relative;
  gap: 60px;
  z-index: 7;
  font-size: 16px;
}

.title12 {
  align-self: stretch;
  position: relative;
  line-height: 48px;
}

.container4 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 0;
}

.avatar1 {
  width: 32px;
  position: relative;
  border-radius: 32px;
  background-color: rgba(0, 0, 0, 0.1);
  height: 32px;
  overflow: hidden;
  flex-shrink: 0;
}

.title13 {
  align-self: stretch;
  position: relative;
  line-height: 20px;
  font-weight: 500;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 20px;
  flex-shrink: 0;
}

.frameDiv {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.avatar {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.userChild {
  width: 58.3px;
  position: relative;
  height: 9.8px;
}

.user {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.title14 {
  align-self: stretch;
  position: relative;
  font-size: 16px;
  line-height: 24px;
  display: -webkit-inline-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.card {
  flex: 1;
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 16px;
}

.list1 {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
  z-index: 1;
  font-size: 14px;
}

.sectionChild1 {
  width: 100%;
  position: absolute;
  margin: 0 !important;
  right: 0px;
  bottom: -0.5px;
  left: 0px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 2;
}

.section4 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 60px 170px;
  position: relative;
  gap: 60px;
  z-index: 8;
  text-align: left;
}

.title17 {
  align-self: stretch;
  width: 323px;
  position: relative;
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.title18 {
  align-self: stretch;
  width: 124px;
  position: relative;
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.title19 {
  align-self: stretch;
  width: 175px;
  position: relative;
  line-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.container5 {
  height: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.section5 {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 60px;
  z-index: 9;
  font-size: 20px;
}

.homePage {
  width: 100%;
  /*position: relative;*/
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 80px 0px 0px;
  box-sizing: border-box;
  text-align: center;
  font-size: 40px;
  color: #000;
  font-family: Roboto;
}

</style>